<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>购买算力_算力订单</title>
  <script>
    if (!localStorage.getItem('payDueTimes') || localStorage.getItem('payDueTimes') - Date.now() < 60 * 30) {
      top.document.getElementById('ifr').setAttribute('src', 'hashOrder.html')
    }
  </script>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .col-blue {
      color: #49a9ee;
    }
    
    [v-cloak] {
      display: none;
    }
    .col-blue-near {
      color: #0e9cf2;
    }

    .col-orange {
      color: #f28893;
    }

    .col-gray555 {
      color: #555;
    }

    .col-gray666 {
      color: #666;
    }

    .col-gray999 {
      color: #999;
    }

    .font-18 {
      font-size: 18px;
    }

    .u-router {
      margin: 0 4px;
    }

    .u-router:hover {
      text-decoration: underline;
    }

    .u-line-block {
      height: 2px;
      background: #F2F2F2;
    }

    .m-container-box {
      padding: 20px 0;
      height: 830px;
      background: #fff;
    }

    .item-content {
      margin: 50px 0 60px 290px;
    }

    .item-content h2 {
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 20px;
      color: #333;
      font-weight: bold;
    }

    .item-content ul {
      margin-bottom: 40px;
    }

    .item-content li {
      margin-bottom: 15px;
      color: #666;
      font-size: 16px;
      line-height: 16px;
    }

    .item-content .copy {
      display: inline-block;
      margin-left: 20px;
      padding-left: 26px;
      font-size: 16px;
      cursor: pointer;
      background: url("./images/icon_copy.png") no-repeat left center;
      background-size: 16px auto;
    }

    .item-content .count-down {
      margin-left: 4px;
    }

    .item-content .hash-number {
      font-style: normal;
      margin-right: 4px;
    }

    .item-content .content.col-gray999 {
      margin-top: 20px;
    }

    .item-content .image-tips {
      margin-top: 25px;
      overflow: hidden;
    }

    .item-content .u-image-bg,
    .item-content .item-tips {
      float: left;
    }

    .item-content .item-tips {
      margin: 32px 0 0 75px;
    }

    .item-content .u-image-bg.phone {
      width: 171px;
      height: 238px;
      background: url("./images/phone-bg-wx.png") no-repeat;
      background-size: 171px auto;
    }

    .item-content .u-image-bg.code {
      margin: 13px 0 0 38px;
      width: 170px;
      height: 200px;
      padding-top: 182px;
      color: #333;
      font-size: 14px;
      text-align: center;
      background: url("./images/code.png") no-repeat;
      background-size: 170px auto;
    }

    .item-content .item-tips li {
      font-size: 14px;
      line-height: 16px;
      color: #999;
    }

    .content.caoshi {
      color: #f28893;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" file-name="buyHash_hashCacl" v-cloak>
    <div class="m-container-box">
      <!--订单信息-->
      <div class="item-content order-info">
        <h2>订单信息</h2>
        <ul>
          <li>
            <span class="label">算力订单：</span>
            <span class="content" ref="copyTxt">{{hashOrder}}</span>
            <div class="copy col-blue" @click="copyText">复制</div>
          </li>
          <li>
            <span class="label">创建日期：</span>
            <span class="content">{{G.getFormatTime(createTime)}}</span>
          </li>
          <li>
            <span class="label">购买算力：</span>
            <span class="content"><i class="hash-number">{{G.toThousandsRound(hashTotal)}}</i>TH</span>
          </li>
        </ul>
        <ul>
          <li>
            <span class="label">支付金额：</span>
            <span class="content col-blue-near font-18">{{G.toThousandsRound(paySum)}} TAIC</span>
          </li>
          <li>
            <div class="content col-gray999" v-if="isPaying">距支付超时还有<span class="count-down col-orange">{{getDueTime}}</span></div>
            <div class="content col-gray999 caoshi" v-if="!isPaying">支付已超时</div>
          </li>
        </ul>
      </div>
      <!--end 订单信息-->
      <!--分割线-->
      <div class="u-line-block"></div>
      <!--end 分割线-->
      <!--温馨提示-->
      <div class="item-content tips-info">
        <h2>温馨提示</h2>
        <ul>
          <li>
            <div class="label col-gray555">请注册
              <a href="http://wallet.tesra.vip" target="_blank" class="u-router col-blue">Tesra - Wallet</a>
              完成订单支付（<span class="col-gray999">使用手机扫描二维码，在浏览器中打开Tesra - Wallet</span>）
            </div>
          </li>
          <li>
            <div class="image-tips">
              <div class="u-image-bg phone"></div>
              <div class="u-image-bg code">
                <span>请打开手机微信，扫一扫</span>
              </div>
              <ul class="item-tips">
                <li>支付流程：</li>
                <li>第一步：注册Tesra - Wallet</li>
                <li>第二步：复制算力订单号码</li>
                <li>第三步：打开Tesra - Wallet，打开支付界面，粘贴订单号。</li>
                <li>第四步：确认订单信息，并完成支付。</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!--end 温馨提示-->
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        hashOrder: '获取中...',
        createTime: 0,
        expirationTime: 0,
        hashTotal: 0,
        paySum: 0,
        isPaying: true,
      },
      methods: {
        init() {
          this.timer()
          var order = JSON.parse(localStorage.getItem('order_info'));
          if (order) {
            this.hashOrder = order.orderId
            this.createTime = Date.now()
            this.expirationTime = order.effeTime
            this.hashTotal = order.orderTh
            this.paySum = order.total
          }
          this.requestData()
        },
        copyText(el) {
          this.oCopy(this.$refs.copyTxt);
        },
        oCopy(ele) {
          var range = document.createRange();
          range.selectNode(ele);
          var selection = window.getSelection();
          selection.rangeCount > 0 && selection.removeAllRanges();
          selection.addRange(range);
          document.execCommand('copy');
        },

        // 倒计时函数
        timer() {
          setInterval(() => {
            var dealyTime = localStorage.getItem('_dealyTime')
            if (this.expirationTime - this.createTime > 1000) {
              this.expirationTime -= 1000
            } else {
              this.isPaying = false

            }
          }, 1e3)
        },

        requestData() {
          var url = '/order/findorderdate/' + this.hashOrder

          var ydata = {
            //order: this.hashOrder,
          }
          var data = G.paramsSerializer(ydata)
          axios.get(url).then(res => {
              if (res.data.code == 1) {
                if (res.data.data.payStatus == 2) {

                  // 付款成功
                  localStorage.setItem('payStatus', '1')
                  top.location.hash = 'pay_status'
                } else if (res.data.data.payStatus == 3) {
                  top.location.hash = 'pay_status'
                  localStorage.setItem('payStatus', '0')
                }
                setTimeout(() => {
                  this.requestData()
                }, 1000)
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
      },

      computed: {
        getDueTime() {
          var timerCount = this.expirationTime - this.createTime
          timerCount = Math.floor(timerCount / 1000)
          var min = (parseInt(timerCount / 60, 10) + '').replace(/^(\d)$/, '0$1')
          var sec = (timerCount % 60 + '').replace(/^(\d)$/, '0$1')
          return min + ' : ' + sec
        },
        dues() {
          return this.expirationTime - this.createTime
        }
      },
      mounted() {
        this.init()
      },

    })
  </script>
</body>

</html>